<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #wrap {
            height: 600px;
            width: 400px;
            position: relative;
            margin: 10px auto;
        }

        #header {
            height: 50px;
            width: 400px;
        }

        #main {
            list-style: none;
        }

        #main li {
            float: left;
            position: relative;
            width: 70px;
            height: 70px;
            margin: 1px;
            overflow: hidden;
        }

        #main .title {
            position: absolute;
            width: 70px;
            height: 70px;
            left: 0;
            top: 70px;;
            /*transform:translateY(70px);*/
            color: #ffffff;
            background-color: rgba(29, 200, 200, 0.3);
            line-height: 22px;
            text-align: center;
            transition: 0.4s;

        }

        #main .title span {
            display: block;
        }

        #main li:hover .title {
            /*top: 0;*/
            transform: translateY(-70px);
        }

    </style>
</head>
<body>
<div id="wrap">
    <div id="header">
        <input type="text" id="method"/>
        <button id="btn" type="button">查询</button>
    </div>
    <ul id="main">
    </ul>
</div>
</body>
<script>


    var ul = document.querySelector("#main"); //内容块
    var btn = document.getElementById("btn"); //获取点击按钮
    var methodInput = document.getElementById("method");//条件

    btn.onclick = function () {//点击事件
        var method = methodInput.value;
        showData(method);
    }

    showData("");
    function showData(method) {
        var req = new XMLHttpRequest();
        req.open("get", "dataList.js", true);
        req.onreadystatechange = function () {
            if (req.readyState == 4 && req.status == 200) {
                var text = req.responseText;
                var list = JSON.parse(text); //获取的是一个集合
                var str = "";
                for (var i = 0; i < list.length; i++) {
                    var obj = list[i]; //{"name": "海皇", "loaction": "上", "hurt": "ad物理","src":"1.jpg"}

                    var heroName = obj["name"];
                    var position = obj["loaction"];
                    var hurt = obj["hurt"];
                    var imgSrc = "images/" + obj["src"];
                    if (heroName.indexOf(method) != -1 || position.indexOf(method)!=-1 || hurt.indexOf(method)!=-1) {
                        str += "<li> <img src=" + imgSrc + "> <div class='title'> <span>" + heroName + "</span> <span>" + position + "</span> <span>" + hurt + "</span> </div> </li>";
                    }
                    /*
                     <li>
                     <img src="images/1.jpg">
                     <div class="title">
                     <span>狐狸</span>
                     <span>中</span>
                     <span>ap伤害</span>
                     </div>
                     </li>
                     */
                }
                ul.innerHTML = str;
            }
        }
        req.send();
    }
</script>
</html>